<template>
  <div class="add">
    <div class="title">请进行验收工艺配置</div>
    <div class="form">
      <template v-for="item in planList" :key="item.standardId">
        <div class="form-title">{{ item.standardName }}</div>
        <div class="form-item" v-for="item2 in item.children" :key="item2.standardId">
          <div class="sub-title">{{ item2.standardName }}</div>
          <el-select v-model="item2.selectedVal" placeholder="请选择">
            <el-option
              v-for="item3 in item2.children"
              :key="item3.standardId"
              :label="item3.standardName"
              :value="item3.standardId"
            />
          </el-select>
        </div>
      </template>
    </div>
    <div class="btns">
      <el-button type="primary" @click="onConfrim">提交</el-button>
    </div>
    <el-dialog v-model="showWarnDialog" title="提示">
      <div class="warn-tips">
        <div class="icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="text">还有工序未完成工艺选择，请完成所有设置</div>
        <div class="btns">
          <el-button type="primary" plain @click="showWarnDialog = false">取消</el-button>
          <el-button type="primary" @click="showWarnDialog = false">知道了</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { editAcceptance } from "@/apis/clientManager";
const props = defineProps(["planData", "customerId"]);
import { ElMessage } from "element-plus";
const showWarnDialog = ref(false);
const planList = props.planData;
const onConfrim = async () => {
  const arr = [];
  let count = 0;
  planList.map(item => {
    if (item.children && item.children.length > 0) {
      item.children.map(item2 => {
        count++;
        if (item2.selectedVal) {
          arr.push({ craftId: item2.selectedVal });
        }
      });
    }
  });
  if (count != arr.length) {
    showWarnDialog.value = true;
    return;
  }
  try {
    // console.log("参数", arr);
    // return;
    await editAcceptance(props.customerId, arr);
    ElMessage({
      message: "提交成功",
      type: "success"
    });
  } catch (err) {}
};
</script>
<style scoped lang="scss">
.add {
  padding: 20px;

  .title {
    font-size: 18px;
    color: #131414;
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    &::before {
      content: "";
      width: 6px;
      height: 6px;
      background-color: #409eff;
      border-radius: 50%;
      margin-right: 5px;
      display: inline-block;
    }
  }

  .form {
    .form-title {
      font-size: 14px;
      color: #3d3d3d;
      margin: 20px 0px 15px 0px;
    }

    .form-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .sub-title {
        white-space: nowrap;
        margin-right: 10px;
        font-size: 14px;
        color: #86909c;
      }
    }
  }

  .btns {
    text-align: right;
    margin-top: 30px;
  }
}
</style>
